<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta name="apple-mobile-web-app-status-bar-style" content="blank">
  <meta content="telephone=no" name="format-detection" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>活动:砸金蛋</title>
  <link rel="stylesheet" href="./css/mreset.css">
  <link rel="stylesheet" href="./css/swiper-3.4.2.min.css">
  <link rel="stylesheet" href="./css/main.css">
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/flexible.js"></script>
  <script src="js/swiper-3.4.2.min.js"></script>
  <script src="/js/djx.js"></script>

</head>
<body ontouchstart>
  <div class="wap">
    <div class="egg">
      <div class="egg-jp">
        <div class="jp">
          <div class="left-egg eggL" data-parms="1"></div>
          <div class="right-egg eggL" data-parms="2"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- 弹窗-->
  <div class="order-mark egg-dialog">
      <div class="order-dialog" style="margin-top: 0">
        <div class="order-dialog-header">
          温馨提示
        </div>
        <div class="order-dialog-body" style="text-align: center">
          确定选择 <span>左边</span> 金蛋进行换购吗？
        </div>
        <div class="order-dialog-footer">
          <button class="btn" id="cancle">取消</button>
          <button class="dialog-btn btn" id="orderBtn">确定</button>
        </div>
      </div>
    <!-- 选择金蛋成功 -->
    <div class="egg-result"  id="eggResult">
      <h1>升级成功</h1>
      <img id="shopegg" src="./images/activity_golden_result_commodity@2x.png" />
      <button class="btn">确定</button>
    </div>
  </div>
  <script>
    //关闭
    $('#cancle').click(function(){
      $('.order-mark').hide()
    })
    $('.order-mark').click(function (e) {
      if($(e.target).hasClass('order-mark')){
        $(this).fadeOut();
      }
    })
    $('#orderBtn').click(function(){
      $('.order-dialog').hide();
      var that = $(this);
      //得到数据
      $.ajax({
        url:'/res.json',
        success:function (res) {
          $.each(res,function (i,v) {
            if(v.id == that.data('id')){
              $('#shopegg')[0].src=v.img;
              $('#shopegg').data('on',v.id);
              //window.location.href = ''
            }
          })
        }
      })
      $('#eggResult').show();
    })

    $('.eggL').click(function () {
      $('.order-mark').css('display','flex');
      $('#orderBtn').data('id',$(this).data('parms'));
      if($(this).data('parms')!="1"){
        $('.order-dialog-body span').html("右边")
      }else{
        $('.order-dialog-body span').html("左边")
      }
      if($('#shopegg').data('id')!=''){
       // 选中之后移除一个鸡蛋 为最终结果
        $(this).css('position','static').addClass("maginCenter").siblings().remove()
      }
    })

  </script>
</body>
</html>